;
(function () {
    var data = {
        code: 'images/event_loop_2.png',
        data: [{ // 1
                info: '第1步：事件循环开始，宏任务队列中，只有script(整体代码)任务，任务script(整体代码)执行，全局执行上下文global入栈',
                queue: [{
                    name: 'script队列',
                    type: 'macro'
                }],
                task: [{
                    name: 'script',
                    queue: 'script队列',
                    type: 'macro'
                }],
                CE: ['global']
            },
            { // 2
                info: '第2步：script任务执行时遇到了setTimeout, setTimeout为一个宏任务源，它将任务timeout1分发到对应的队列中去',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global']
            },
            { // 3
                info: '第3步：script任务执行时遇到了Promise实例, promise2执行上下文入栈',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'promise2']
            },
            { // 4
                info: '第4步：promise2执行时遇到了函数resolve2，resolve2执行上下文入栈',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'promise2', 'resolve2']
            },
            { // 5
                info: '第5步：resolve2执行完成，resolve2执行上下文出栈',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'promise1']
            },
            { // 6
                info: '第6步：promise2执行完成，promise2执行上下文出栈',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global']
            },
            { // 7
                info: '第7步：任务then2被分发到对应队列中',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'promise队列',
                        type: 'micro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then2',
                        queue: 'promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global']
            },
            { // 8
                info: '第8步：接着，script任务执行时遇到了setTimeout, 任务timeout2被分发到对应队列中',
                queue: [{
                        name: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'promise队列',
                        type: 'micro'
                    }
                ],
                task: [{
                        name: 'script',
                        queue: 'script队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then2',
                        queue: 'promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global']
            },
            { // 9
                info: '第9步：宏任务script执行完成，开始执行当前的所有微任务，当前的微任务只有promise队列中的then2, 直接执行then2任务，then2执行上下文入栈',
                queue: [{
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'promise队列',
                        type: 'micro'
                    }
                ],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then2',
                        queue: 'promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global', 'then2']
            },
            { // 10
                info: '第10步：then2任务执行完成，then2执行上下文出栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global']
            },
            { // 11
                info: '第11步：此时，第一轮循环结束，开始第二轮循环。开始宏任务timeout1, timeout1执行上下文入栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1']
            },
            { // 12
                info: '第12步：任务timeout1执行时遇到了Promise实例，promise1开始自行，promise1执行上下文入栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1', 'promise1']
            },
            { // 13
                info: '第13步：promise1执行时，遇到了函数resolve1, resolve1执行上下文入栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1', 'promise1', 'resolve1']
            },
            { // 14
                info: '第14步：resolve1执行完成，resolve1执行上下文出栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1', 'promise1']
            },
            { // 15
                info: '第15步：promise1执行完成，promise1执行上下文出栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1']
            },
            { // 16
                info: '第16步：任务then1被分发到对应的队列中',
                queue: [{
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'promise队列',
                        type: 'micro'
                    }
                ],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'timeout1',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then1',
                        queue: 'promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global', 'timeout1']
            },
            { // 17
                info: '第17步：宏任务timeout1执行完成，开始完成所有微任务，then1任务执行，then1执行上下文入栈',
                queue: [{
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'promise队列',
                        type: 'micro'
                    }
                ],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then1',
                        queue: 'promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global', 'timeout1', 'then1']
            },
            { // 18
                info: '第18步：then1任务执行完成，then1执行上下文出栈',
                queue: [{
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout1']
            },
            { // 19
                info: '第19步：timeout1执行完成，timeout1执行上下文出栈',
                queue: [{
                        name: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global']
            },
            { // 20
                info: '第20步：此时，第二轮循环结束，开始第三轮循环。开始宏任务timeout2, timeout2执行上下文入栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout2']
            },
            { // 21
                info: '第21步：任务timeout2执行时遇到了Promise实例，promise3开始自行，promise3执行上下文入栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout2', 'promise3']
            },
            { // 22
                info: '第22步：promise3执行时，遇到了函数resolve3, resolve3执行上下文入栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout2', 'promise3', 'resolve3']
            },
            { // 23
                info: '第23步：resolve3执行完成，resolve3执行上下文出栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout2', 'promise3']
            },
            { // 24
                info: '第24步：promise3执行完成，promise3执行上下文出栈',
                queue: [{
                    name: 'setTimeout队列',
                    type: 'macro'
                }],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    }
                ],
                CE: ['global', 'timeout2']
            },
            { // 25
                info: '第25步：任务then3被分发到对应的队列中',
                queue: [{
                        name: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'promise队列',
                        type: 'micro'
                    }
                ],
                task: [{
                        name: 'timeout2',
                        queue: 'setTimeout队列',
                        type: 'macro'
                    },
                    {
                        name: 'then3',
                        queue: 'promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global', 'timeout2']
            },
            { // 26
                info: '第26步：宏任务timeout2执行完成，开始完成所有微任务，then3任务执行，then3执行上下文入栈',
                queue: [
                    {
                        name: 'promise队列',
                        type: 'micro'
                    }
                ],
                task: [{
                        name: 'then3',
                        queue: 'promise队列',
                        type: 'micro'
                    }
                ],
                CE: ['global', 'timeout2', 'then3']
            },
            { // 27
                info: '第27步：then3任务执行完成，then3执行上下文出栈',
                CE: ['global', 'timeout2']
            },
            { // 28
                info: '第28步：timeout2执行完成，timeout2执行上下文出栈',
                CE: ['global']
            }
        ]
    }

    eventLoop(data)
})();